// hooks都是给函数组件用的，为了让函数组件能够拥有类组件的功能
// 16.8版本
// hooks是必须在函数组件的顶层使用的
import React, { useState } from "react";

const App = () => {
  // 调用useState会返回一个数组, 数组里面是变量和改变变量的方法
  // useState要接受一个参数，参数就是这个变量的初始值
  const [count, setCount] = useState(5);
  const handleClick = () => {
    // 如果改变以后的值不依赖前一次的值，直接里面写值
    // 如果需要依赖到，参数写函数
    // setCount(50);
    // 改变数据的方法的是异步的，这里没有回调函数的
    // 如果想得到改变以后的结果，需要配合useEffect一起使用
    setCount((v) => v + 1);
    console.log(count);
  };

  const [num, setNum] = useState(10);

  return (
    <>
      <h2>useState</h2>
      <span>{count}</span>
      <button onClick={handleClick}>+</button>
      <p>{num}</p>
      <button onClick={() => setNum((v) => v + 2)}>++</button>
    </>
  );
};

export default App;
